import React from "react";
import { Breadcrumb } from "antd";
import { useSelector } from "react-redux";

const AntBreadcrumb = () => {
  const breadcrumbItems = useSelector(
    (state) => state.breadcrumb.breadcrumbItems
  );

  const items = [
    {
      title: "系统", // 直接取第一个 breadcrumb 的 title
    },
    {
      title: breadcrumbItems[0]?.title, // 直接取第一个 breadcrumb 的 title
    },
  ];

  // 如果 breadcrumbItems[0].path 存在，则添加 path 项
  if (breadcrumbItems[0]?.typeChildren) {
    items.push({
      title: breadcrumbItems[0].typeChildren, // 这里是 path 项
    });
  }

  return (
    <Breadcrumb
      items={items}
      style={{
        margin: "16px 0",
      }}
    />
  );
};

export default AntBreadcrumb;
